{extend name="layout"}
{block name="title"}ThinkPHP学习 - 路由与控制器{/block}

{block name="content"}
<script>
    var $ = layui.$;
    $('#nav-route').addClass('layui-this')

    function get1() {
        $.get('/api/restful/list?name=叶先生&age=18', function (data, status) {
            console.log('数据：', data)
            console.log('状态：', status)
        })
    }

    function get2() {
        $.get('/api/restful/detail/123', function (data, status) {
            console.log('数据：', data)
            console.log('状态：', status)
        })
    }

    function post1() {
        var obj = {
            name: '李小姐',
            age: '19'
        }
        $.post('/api/restful/add', obj, function (data, status) {
            console.log('数据：', data)
            console.log('状态：', status)
        })
    }

    function put1() {
        var obj = {
            id: '123',
            name: '李小姐',
            age: '19'
        }
        $.ajax({
            url: '/api/restful/update',
            type: 'put',
            data: obj,
            success: function (data, status) {
                console.log('数据：', data)
                console.log('状态：', status)
            }
        });
    }

    function delete1() {
        $.ajax({
            url: '/api/restful/delete/123',
            type: 'delete',
            success: function (data, status) {
                console.log('数据：', data)
                console.log('状态：', status)
            }
        });
    }
</script>

<style>
    h1 {
        margin-top: 20px;
    }

    p {
        margin-left: 20px;
    }

    a{
        color:blue;
    }
</style>

<section>
    <h1>对比分析</h1>
    <ul>
        <li>作用：二者作用基本一样</li>
        <li>目的：二者都存在是为了概念更加明细
            <p>路由：定义URL规则、参数解析、权限控制</p>
            <p>控制器：处理具体业务</p>
        </li>
        <li>可并存，可缺一
            <p>无路由时，直接访问控制器</p>
            <p>无控制器时，路由可以直接返回</p>
        </li>
    </ul>
</section>

<section>
    <h1>参数</h1>
    <p>id：{$id}</p>
    <p>name：{$name}</p>
    <p><a href="https://doc.thinkphp.cn/v8_0/request_obj.html#%E5%8A%A9%E6%89%8B%E5%87%BD%E6%95%B0"
            target="_blank">更多写法</a></p>
</section>

<section>
    <h1>API</h1>
    <p>json()：处理返回值</p>
    <p><a href="/api/json/test" target="_blank">例子</a></p>
</section>

<section>
    <h1>restful（F12查看）</h1>
    <button onclick="get1()" type="button" class="layui-btn layui-btn-primary">get请求-传统传参</button>
    <button onclick="get2()" type="button" class="layui-btn">get请求-动态参数</button>
    <button onclick="post1()" type="button" class="layui-btn layui-btn-normal">post请求</button>
    <button onclick="put1()" type="button" class="layui-btn layui-btn-warm">put请求</button>
    <button onclick="delete1()" type="button" class="layui-btn layui-btn-danger">delete请求</button>
</section>

<section>
    <h1>API文档</h1>
    <p>注意：使用该插件，必须部署web服务器，直接运行无法查看</p>
    <p><a href="/apidoc" target="_blank">例子</a></p>
    <p><a href="https://docs.apidoc.icu/guide/#%E2%9C%A8%E7%89%B9%E6%80%A7" target="_blank">官网查看</a></p>
</section>
{/block}